/************************************************************************/
/*                                                                      */
/************************************************************************/
function G_LoadSettings() {
    G_Debug("G_LoadSettings() start")
    var settings = System.Gadget.Settings;
    $(":input").each(function(i) {
        var propName = this.id;
        var propValue = settings.read(propName);
        var type = $(this).attr("type");
        G_Debug(propName + "=" + propValue);
        
        
        if(type == "checkbox") {
            $(this).attr("checked",propValue);
        } else {
            $(this).val(propValue);
        }
    });
    G_Debug("G_LoadSettings() end");
}

function G_OnSettingsClosing(e) {
    G_Debug("G_OnSettingClosing(e)");
    // Save the settings if the user clicked OK.
    if (e.closeAction == e.Action.commit)
    {
        var settings = System.Gadget.Settings;
        
        // Input Tag
        $(":input").each(function(i) {
            var propName = this.id;
            var propValue = null;
            
            if($(this).attr("type") == "checkbox") {
                propValue = $(this).attr("checked");
            } else {
                propValue = $(this).val();
            }
            if(propValue == null || propValue == "") {
                if($(this).hasClass("has-color-picker")) {
                    propValue = $("#color-picker-" + $(this).id).color;   
                }
            }
            settings.write(propName, propValue);
            G_Debug("write:" + propName + "=" + propValue);
        });
    } 
    // Allow the Settings dialog to close.
    e.cancel = false;

}

function G_Debug(msg) {
    $("#debug-pane").append("<div>" + msg + "<div>");
}
/************************************************************************/
/* Main                                                                     */
/************************************************************************/
System.Gadget.onSettingsClosing = G_OnSettingsClosing;

$(document).ready(function(){
    G_LoadSettings();
    
    
    $("#tabs > ul").tabs();
    // Setting 'About' tag.
    $("#version").text(System.Gadget.version);
    $("#project-page").append('<a href="http://code.google.com/p/skype-vista-gadget/?' + System.Gadget.version + '">Click here.</a>');
    
    
    // add toggle button for color picker
    $(".has-color-picker").each(function(i) {
        var inputId = this.id;
        var btnId = "button-" + inputId;
        var colorPickerId = "color-picker-" + inputId;
        
        $(this).after("<div id='" + colorPickerId + "' class='color-picker'></div>");
        var colorPicker = $("#"+ colorPickerId);
        colorPicker.farbtastic('#' + inputId);
        
		// TODO: Meisui8 fix this line to display the image icon.
        $(this).after("<input id='" + btnId + "' type=button value='!' />");
        
        var inputText = $("#" + inputId);
        $("#" + btnId).click(function() {
            var left = inputText.offset().left;
            var top = inputText.offset().top + inputText.height() + 2;
            colorPicker.css({
                top: top,
                left: left
            });
            
            
            $(".color-picker").each(function(i){
                
                if(colorPickerId == this.id ) {
                    colorPicker.toggleClass("color-picker-display");
                } else {
                    $(this).removeClass("color-picker-display");
                }
            });
            
            
        });
    });
    
});
